<template>
  <div class="" style="display: flex">
    <a-card :bordered="false">
      <a-tree class="draggable-tree" :tree-data="gData" />
    </a-card>
    <a-card :bordered="false">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="word编辑器">
          <a-button type="primary" @click="insertModal">插入</a-button>
          <a-button style="margin-left: 8px" type="primary" @click="validate">校验</a-button>
          <a-button style="margin-left: 8px" type="primary" @click="save">保存</a-button>
          <j-editor ref="myEditor" v-model="noticeContent" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="变量编辑">
          <addVariableList></addVariableList>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-modal title="选择变量" :visible="visible" @ok="handleOk" @cancel="visible = false">
      <a-select v-model="varName" default-value="lucy" style="width: 120px">
        <a-select-option v-for="item in dataSource" :value="item.columnKey">
          {{ item.columnKey }} {{ item.columnName }}
        </a-select-option>
      </a-select>
    </a-modal>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ExTenderAnnQuaInqueryAnnModal from './modules/ExTenderAnnQuaInqueryAnnModal'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import '@/assets/less/TableExpand.less'
import addVariableList from '@views/exNotice/modules/addVariableList.vue'
import { getAction } from '@api/manage'

const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    title: '变量名',
    scopedSlots: { customRender: 'name' }
  },
  {
    dataIndex: 'name2',
    key: 'name2',
    title: 'label',
    scopedSlots: { customRender: 'name2' }
  },
  {
    dataIndex: 'name3',
    key: 'name3',
    title: '变量类型',
    scopedSlots: { customRender: 'name3' }
  },
  {
    dataIndex: 'name4',
    key: 'name4',
    title: '变量长度',
    scopedSlots: { customRender: 'name4' }
  }
]

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer']
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser']
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher']
  }
]
export default {
  name: 'addVar',
  mixins: [JeecgListMixin],
  components: { addVariableList },
  data() {
    return {
      url: {
        list: '/exTenderFileSetVariable/exTenderFileSetVariable/list',
        delete: '/exTenderFileSetVariable/exTenderFileSetVariable/delete',
        deleteBatch: '/exTenderFileSetVariable/exTenderFileSetVariable/deleteBatch',
        exportXlsUrl: '/exTenderFileSetVariable/exTenderFileSetVariable/exportXls',
        importExcelUrl: 'exTenderFileSetVariable/exTenderFileSetVariable/importExcel'
      },
      dataSource: [],
      visible: true,
      varName: null,
      data,
      columns,
      form: this.$form.createForm(this),
      noticeContent: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      model: {},
      validatorRules: {
        unifiedDealCode: [{ required: true, message: '请输入项目编号!' }]
      },
      gData: [
        {
          title: '0-0',
          key: '0-0',
          children: [
            {
              title: '0-0-0',
              key: '0-0-0',
              children: [
                { title: '0-0-0-0', key: '0-0-0-0' },
                { title: '0-0-0-1', key: '0-0-0-1' },
                { title: '0-0-0-2', key: '0-0-0-2' }
              ]
            },
            {
              title: '0-0-1',
              key: '0-0-1',
              children: [
                { title: '0-0-1-0', key: '0-0-1-0' },
                { title: '0-0-1-1', key: '0-0-1-1' },
                { title: '0-0-1-2', key: '0-0-1-2' }
              ]
            },
            {
              title: '0-0-2',
              key: '0-0-2'
            }
          ]
        },
        {
          title: '0-1',
          key: '0-1',
          children: [
            { title: '0-1-0-0', key: '0-1-0-0' },
            { title: '0-1-0-1', key: '0-1-0-1' },
            { title: '0-1-0-2', key: '0-1-0-2' }
          ]
        },
        {
          title: '0-2',
          key: '0-2'
        }
      ]
    }
  },
  created() {
    this.loadData()
  },
  computed: {},
  methods: {
    validate() {
      let vala = true
      let errList = []
      this.dataSource.forEach(item => {
        if (this.noticeContent.indexOf(item.columnKey) < 0) {
          errList.push(item.columnKey)
          vala = false
        }
      })
      if (vala) {
        this.$message.success('校验通过')
        return true
      } else {
        this.$message.error('请绑定全部变量,变量' + errList.join() + '未绑定')
        return false
      }
    },
    save() {
      if (this.validate) {
        this.$message.success(this.noticeContent)
      }
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      this.loading = true
      getAction(this.url.list)
        .then(res => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.dataSource = res.result.records || res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    insertModal() {
      this.loadData()
      this.varName = ''
      this.visible = true
    },
    handleOk() {
      const editor = this.$refs.myEditor.editor
      if (editor) {
        // 在当前光标位置插入内容
        editor.insertContent(this.varName)
      }
      console.log('ok')
      this.visible = false
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
